<template>
  <div class="opportunity-page">
    <!-- 统一用户信息头部组件 -->
    <UserInfoBar />

    <!-- 子Tab导航 -->
    <div class="tab-navigation">
      <div class="scroll-indicators">
        <div class="scroll-arrow left" v-if="canScrollLeft" @click="scrollTabs('left')">
          <span>‹</span>
        </div>
        <div class="scroll-arrow right" v-if="canScrollRight" @click="scrollTabs('right')">
          <span>›</span>
        </div>
      </div>
      <div class="tabs-container" ref="tabsContainer" @scroll="updateScrollIndicators">
        <div 
          v-for="tab in allTabs" 
          :key="tab.id"
          :class="['tab-item', { active: activeTab === tab.id }]"
          @click="switchTab(tab.id)"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-label">{{ tab.label }}</span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 限时奇遇 -->
      <div v-if="activeTab === 'limited'" class="content-panel">
        <div class="panel-header">
          <div class="panel-title">限时奇遇</div>
          <div class="panel-subtitle">把握机会，收获珍宝</div>
        </div>
        
        <div class="events-list">
          <div v-for="event in limitedEvents" :key="event.id" class="event-card">
            <div class="event-badge" :class="event.status">{{ getEventStatusText(event.status) }}</div>
            <div class="event-content">
              <div class="event-title">{{ event.title }}</div>
              <div class="event-desc">{{ event.description }}</div>
              <div class="event-time-info">
                <div class="time-item">
                  <span class="time-label">开始：</span>
                  <span class="time-value">{{ event.startTime }}</span>
                </div>
                <div class="time-item">
                  <span class="time-label">结束：</span>
                  <span class="time-value">{{ event.endTime }}</span>
                </div>
              </div>
              <div class="event-rewards">
                <span class="rewards-label">奖励：</span>
                <span v-for="(reward, idx) in event.rewards" :key="idx" class="reward-tag">
                  {{ reward.name }} x{{ reward.amount }}
                </span>
              </div>
            </div>
            <div class="event-actions">
              <button class="action-btn primary" @click="enterEvent(event)">参与</button>
            </div>
          </div>
          <div v-if="!limitedEvents.length" class="empty-state">暂无限时奇遇</div>
        </div>
      </div>

      <!-- 特殊挑战 -->
      <div v-if="activeTab === 'challenge'" class="content-panel">
        <div class="panel-header">
          <div class="panel-title">特殊挑战</div>
          <div class="panel-subtitle">挑战自我，获取奖励</div>
        </div>
        
        <div class="challenges-list">
          <div v-for="challenge in challenges" :key="challenge.id" class="challenge-card">
            <div class="challenge-badge" :class="challenge.difficulty">
              {{ getDifficultyText(challenge.difficulty) }}
            </div>
            <div class="challenge-content">
              <div class="challenge-title">{{ challenge.title }}</div>
              <div class="challenge-desc">{{ challenge.description }}</div>
              <div class="challenge-attempts">
                剩余次数：{{ challenge.remainingAttempts }}/{{ challenge.maxAttempts }}
              </div>
              <div class="challenge-rewards">
                <span class="rewards-label">奖励：</span>
                <span v-for="(reward, idx) in challenge.rewards" :key="idx" class="reward-tag">
                  {{ reward.name }} x{{ reward.amount }}
                </span>
              </div>
            </div>
            <div class="challenge-actions">
              <button 
                v-if="challenge.canChallenge" 
                class="action-btn primary" 
                @click="startChallenge(challenge)"
              >
                开始挑战
              </button>
              <button v-else class="action-btn disabled" disabled>
                {{ getDisabledReason(challenge) }}
              </button>
            </div>
          </div>
          <div v-if="!challenges.length" class="empty-state">暂无可用挑战</div>
        </div>
      </div>

      <!-- 奇遇探索 -->
      <div v-if="activeTab === 'explore'" class="content-panel">
        <div class="panel-header">
          <div class="panel-title">奇遇探索</div>
          <div class="panel-subtitle">探索未知，寻找机缘</div>
        </div>
        
        <div class="exploration-grid">
          <div 
            v-for="location in explorationLocations" 
            :key="location.id"
            :class="['location-card', location.status]"
            @click="exploreLocation(location)"
          >
            <div class="location-status">{{ getLocationStatus(location.status) }}</div>
            <div class="location-name">{{ location.name }}</div>
            <div class="location-desc">{{ location.description }}</div>
            <div v-if="location.status === 'available'" class="explore-btn">探索</div>
          </div>
          <div v-if="!explorationLocations.length" class="empty-state">暂无可探索地点</div>
        </div>
      </div>

      <!-- 其他机遇 -->
      <div v-if="activeTab === 'other'" class="content-panel">
        <div class="panel-header">
          <div class="panel-title">其他机遇</div>
          <div class="panel-subtitle">更多精彩，敬请期待</div>
        </div>
        <div class="coming-soon">
          <div class="coming-icon">🎁</div>
          <div class="coming-text">更多机遇即将开放</div>
          <div class="coming-desc">敬请期待</div>
        </div>
      </div>
    </div>

    <!-- 全局底部导航栏 -->
    <CustomTabBar />
  </div>
</template>

<script>
import UserInfoBar from '../../src/components/UserInfoBar.vue'

export default {
  components: { UserInfoBar },
  data() {
    return {
      activeTab: 'limited',
      allTabs: [
        { id: 'limited', icon: '⏰', label: '限时奇遇' },
        { id: 'challenge', icon: '⚔️', label: '特殊挑战' },
        { id: 'explore', icon: '🗺️', label: '奇遇探索' },
        { id: 'other', icon: '🎁', label: '其他机遇' }
      ],
      tabScrollX: 0,
      canScrollLeft: false,
      canScrollRight: false,
      
      // 限时奇遇数据
      limitedEvents: [
        {
          id: 1,
          title: '武林大会',
          description: '群雄齐聚，一决高下',
          startTime: '2025-11-01 10:00',
          endTime: '2025-11-07 22:00',
          status: 'active',
          rewards: [
            { name: '银两', amount: 10000 },
            { name: '经验', amount: 5000 }
          ]
        }
      ],
      
      // 挑战数据
      challenges: [
        {
          id: 1,
          title: '高手试炼',
          description: '挑战武林高手，提升自身实力',
          difficulty: 'hard',
          remainingAttempts: 3,
          maxAttempts: 5,
          canChallenge: true,
          rewards: [
            { name: '经验', amount: 2000 },
            { name: '银两', amount: 5000 }
          ]
        }
      ],
      
      // 探索地点
      explorationLocations: [
        {
          id: 1,
          name: '神秘山洞',
          description: '据说藏有宝物',
          status: 'available'
        },
        {
          id: 2,
          name: '古墓遗迹',
          description: '危险重重',
          status: 'locked'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.updateScrollIndicators()
    })
  },
  methods: {
    switchTab(tabId) {
      this.activeTab = tabId
    },
    
    scrollTabs(direction) {
      const container = this.$refs.tabsContainer
      if (!container) return
      const scrollAmount = 200
      if (direction === 'left') {
        container.scrollLeft -= scrollAmount
      } else {
        container.scrollLeft += scrollAmount
      }
    },
    
    updateScrollIndicators() {
      const container = this.$refs.tabsContainer
      if (!container) return
      this.canScrollLeft = container.scrollLeft > 0
      this.canScrollRight = container.scrollLeft < (container.scrollWidth - container.clientWidth)
    },
    
    getEventStatusText(status) {
      const map = { active: '进行中', upcoming: '即将开始', ended: '已结束' }
      return map[status] || status
    },
    
    getDifficultyText(difficulty) {
      const map = { easy: '简单', normal: '普通', hard: '困难', extreme: '极难' }
      return map[difficulty] || difficulty
    },
    
    getLocationStatus(status) {
      const map = { available: '可探索', locked: '未解锁', exploring: '探索中' }
      return map[status] || status
    },
    
    getDisabledReason(challenge) {
      if (challenge.remainingAttempts <= 0) return '次数已用完'
      if (!challenge.canChallenge) return '条件未满足'
      return '暂不可用'
    },
    
    enterEvent(event) {
      console.log('进入奇遇:', event)
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    
    startChallenge(challenge) {
      console.log('开始挑战:', challenge)
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    
    exploreLocation(location) {
      if (location.status !== 'available') {
        uni.showToast({ title: '该地点暂不可探索', icon: 'none' })
        return
      }
      console.log('探索地点:', location)
      uni.showToast({ title: '功能开发中', icon: 'none' })
    }
  }
}
</script>

<style scoped>
/* ========== 武侠风格机遇页面 ========== */
.opportunity-page {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
  font-family: "STSong", "Noto Serif SC", serif;
  padding-bottom: 60px;
}

/* ========== 子Tab导航 ========== */
.tab-navigation {
  position: relative;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid #c4a57b;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.15);
}

.scroll-indicators {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(139, 111, 71, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.3);
}

.scroll-arrow:hover {
  background: rgba(107, 79, 59, 1);
  transform: translateY(-50%) scale(1.1);
}

.scroll-arrow.left { left: 5px; }
.scroll-arrow.right { right: 5px; }

.tabs-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 40px;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #d8c7a3;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.tab-item:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #c4a57b;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(139, 111, 71, 0.2);
}

.tab-item.active {
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  border-color: #4b3a2a;
  box-shadow: 0 4px 12px rgba(75, 58, 42, 0.3);
}

.tab-icon {
  font-size: 20px;
}

.tab-label {
  font-size: 13px;
  font-weight: 700;
  color: #4a3c2a;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.tab-item.active .tab-label {
  color: #fff;
}

/* ========== 内容区域 ========== */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.content-panel {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #c4a57b;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
}

.panel-title {
  font-size: 20px;
  font-weight: 700;
  color: #4a3c2a;
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.panel-subtitle {
  font-size: 14px;
  color: #8b6f47;
  font-weight: 600;
}

/* ========== 奇遇卡片 ========== */
.events-list, .challenges-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-card, .challenge-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #c4a57b;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
  transition: all 0.3s ease;
}

.event-card:hover, .challenge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(139, 111, 71, 0.3);
}

.event-badge, .challenge-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.event-badge.active { background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%); }
.event-badge.upcoming { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); color: #6b4f3b; }
.event-badge.ended { background: linear-gradient(135deg, #999 0%, #777 100%); }

.challenge-badge.easy { background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%); }
.challenge-badge.normal { background: linear-gradient(135deg, #6b9ec1 0%, #4a7e9f 100%); }
.challenge-badge.hard { background: linear-gradient(135deg, #d4af37 0%, #b8951f 100%); color: #6b4f3b; }
.challenge-badge.extreme { background: linear-gradient(135deg, #c94a3f 0%, #a83931 100%); }

.event-content, .challenge-content {
  padding-right: 80px;
}

.event-title, .challenge-title {
  font-size: 16px;
  font-weight: 700;
  color: #4a3c2a;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.event-desc, .challenge-desc {
  font-size: 13px;
  color: #6b4f3b;
  margin-bottom: 10px;
  line-height: 1.5;
}

.event-time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(139, 111, 71, 0.05);
  border-radius: 8px;
}

.time-item {
  font-size: 12px;
  color: #6b4f3b;
}

.time-label {
  font-weight: 600;
  color: #8b6f47;
}

.challenge-attempts {
  font-size: 13px;
  color: #8b6f47;
  font-weight: 600;
  margin-bottom: 10px;
}

.event-rewards, .challenge-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.rewards-label {
  font-size: 13px;
  font-weight: 700;
  color: #4a3c2a;
}

.reward-tag {
  padding: 3px 10px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid #d4af37;
  border-radius: 10px;
  font-size: 12px;
  color: #6b4f3b;
  font-weight: 600;
}

.event-actions, .challenge-actions {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  padding: 8px 20px;
  border-radius: 15px;
  border: 2px solid;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  border-color: #4b3a2a;
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
}

.action-btn.disabled {
  background: #d0d0d0;
  border-color: #999;
  color: #666;
  cursor: not-allowed;
}

/* ========== 探索地点网格 ========== */
.exploration-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.location-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #c4a57b;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.location-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(139, 111, 71, 0.3);
}

.location-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.location-status {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(139, 111, 71, 0.9);
  color: white;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.location-name {
  font-size: 15px;
  font-weight: 700;
  color: #4a3c2a;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.location-desc {
  font-size: 12px;
  color: #6b4f3b;
  margin-bottom: 10px;
}

.explore-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

/* ========== 空状态 ========== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #8b6f47;
  font-size: 15px;
  font-weight: 600;
}

/* ========== 敬请期待 ========== */
.coming-soon {
  text-align: center;
  padding: 80px 20px;
}

.coming-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.coming-text {
  font-size: 18px;
  font-weight: 700;
  color: #4a3c2a;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.coming-desc {
  font-size: 14px;
  color: #8b6f47;
  font-weight: 600;
}

/* ========== 响应式 ========== */
@media (max-width: 480px) {
  .exploration-grid {
    grid-template-columns: 1fr;
  }
  
  .panel-title {
    font-size: 18px;
  }
  
  .tab-item {
    min-width: 70px;
    padding: 8px 12px;
  }
}
</style>
